<script>
export default {
    props: ['modelValue', "isAdd"],
    emits: ['update:modelValue', "user-save"],
        computed: {
            user: {
                get() {
                    return this.modelValue
                },
                set(value) {
                    this.$emit('update:modelValue', value)
                }
            }
        }
}
</script>
 
<template>
    <div class="user-form">
        <div>
            <label for="username">用户名</label>
            <input type="text" id="username" v-model="user.username" :disabled="!isAdd">
        </div>
        <div>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" v-model="user.nickname">
        </div>
        <div>
            <label for="truename">姓名</label>
            <input type="text" id="truename" v-model="user.truename">
        </div>
        <div>
            <label for="avatar">头像</label>
            <input type="text" id="avatar" v-model="user.avatar">
        </div>
        <div>
            <label for="role">角色</label>
            <select id="role" v-model="user.role">
                <option disabled value="">选择角色</option>
                <option :value="1">管理员</option>
                <option :value="2">普通用户</option>
            </select>
        </div>
        <div>
            <button @click="$emit('user-save')">提交</button>
        </div>
    </div>
</template>
 
<style scoped>
  .user-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
 
  .user-form > div {
    flex: 1 1 auto;
    margin: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
 
  label {
    display: inline-block;
    width: 80px;
  }
 
  textarea,
  input {
    flex: auto;
  }
 
  button {
    margin-left: 80px;
  }
</style>